import React, { useState, useEffect } from "react";
import "./index.css";

const useTick = () => {
  const [tick, setTick] = useState(0);

  useEffect(() => {
    setTimeout(() => {
      setTick(tick + 1);
    }, 1000);
  }, [tick]);
};

function Clock() {
  // 让时钟动起来
  useTick();

  const date = new Date();

  // 获取 时:分:秒
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();

  // 获取 时:分:秒 的旋转角度
  const secondsDeg = (seconds / 60) * 360;
  const minutesDeg = (minutes / 60) * 360 + secondsDeg / 60;
  const hoursDeg = (hours / 12) * 360 + minutesDeg / 12;

  // console.log(hoursDeg, minutesDeg, secondsDeg);
  // 获取 时:分:秒 的旋转样式
  const useSecondsDeg = `rotate(${secondsDeg}deg)`;
  const useMinutesDeg = `rotate(${minutesDeg}deg)`;
  const useHoursDeg = `rotate(${hoursDeg}deg)`;

  return (
    <div className="clock">
      <h3>使用Hook做时钟</h3>
      <div className="clock-bg">
        <div />
        <div />
        <div />
        <div />
        <div />
        <div />
      </div>
      <div>
        <div className="clock-red-dot" />
        <div
          className="clock-point clock-point--second"
          style={{ transform: useSecondsDeg }}
        />
        <div
          className="clock-point clock-point--minute"
          style={{ transform: useMinutesDeg }}
        />
        <div
          className="clock-point clock-point--hour"
          style={{ transform: useHoursDeg }}
        />
        <div className="clock-dot" />
      </div>
      <div className="clock-show-time">
        ——[&nbsp;
        {date.getHours() > 9 ? date.getHours() : "0" + date.getHours()}:
        {date.getMinutes() > 9 ? date.getMinutes() : "0" + date.getMinutes()}:
        {date.getSeconds() > 9 ? date.getSeconds() : "0" + date.getSeconds()}
        &nbsp;]——
      </div>
    </div>
  );
}

export default Clock;
